<!DOCTYPE html>
<html>
<head>
    <title>OpenLayers Map--wms图层添加(透明设置)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
	<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
    <script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
    <script type="text/javascript">
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
		format = 'image/png';
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
               maxExtent: mapExtent,
			   displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
	            new OpenLayers.Control.Navigation(),
	            new OpenLayers.Control.LayerSwitcher(),
	            new OpenLayers.Control.PanZoomBar(),
	            new OpenLayers.Control.MousePosition()
				
				]
            });

            var baseLayer = new OpenLayers.Layer.GoogleTile('google map', 
			'http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga',{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
            
            map.addLayers([baseLayer]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条

			var tiled = new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    //"http://localhost:8181/geoserver/wms",
                    "http://localhost:8787/geoserver/zjlwm/wms",
                    {
                        //LAYERS: 'cite:2800',
                        LAYERS: 'zjlwm:canyin',
                        STYLES: '',
						transparent:true, //背景透明设置
                        format: format,
                        tiled: true,
                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: false,
                        yx : {'EPSG:900913' : true}
                    } 
                );
            
                // setup single tiled layer
               var  untiled = new OpenLayers.Layer.WMS(
                    "cite:diming",
                    //"http://localhost:8181/geoserver/wms",
                     "http://localhost:8787/geoserver/zjlwm/wms",
                    {
                        //LAYERS: 'cite:diming',
                         LAYERS: 'zjlwm:canyin',
                        STYLES: '',
						transparent:true, //背景透明设置
                        format: format
                    },
                    {
                       singleTile: true, 
                       ratio: 1, 
                       isBaseLayer: false,
                       yx : {'EPSG:900913' : true}
                    } 
                );
        
                map.addLayers([untiled, tiled]);

			
			
			
			
			
			map.events.register('click', map, function (e) {
                    document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                    var params = {
                        REQUEST: "GetFeatureInfo",
                        EXCEPTIONS: "application/vnd.ogc.se_xml",
                        BBOX: map.getExtent().toBBOX(),
                        SERVICE: "WMS",
                        INFO_FORMAT: 'text/html',
                        QUERY_LAYERS: map.layers[2].params.LAYERS,
                        FEATURE_COUNT: 50,
                        Layers: 'zjlwm:canyin',
                        WIDTH: map.size.w,
                        HEIGHT: map.size.h,
                        format: format,
                        styles: map.layers[2].params.STYLES,
                        srs: map.layers[2].params.SRS
                      };

                    
                    // handle the wms 1.3 vs wms 1.1 madness
                    if(map.layers[2].params.VERSION == "1.3.0") {
                        params.version = "1.3.0";
                        params.j = e.xy.x;
                        params.i = e.xy.y;
                    } else {
                        params.version = "1.1.1";
                        params.x = e.xy.x;
                        params.y = e.xy.y;
                    }
                        
                    // merge filters
                    if(map.layers[2].params.CQL_FILTER != null) {
                        params.cql_filter = map.layers[2].params.CQL_FILTER;
                    } 
                    if(map.layers[2].params.FILTER != null) {
                        params.filter = map.layers[2].params.FILTER;
                    }
                    if(map.layers[2].params.FEATUREID) {
                        params.featureid = map.layers[2].params.FEATUREID;
                    }
                    OpenLayers.loadURL("../proxy.jsp?http://localhost:8787/geoserver/zjlwm/wms?", params, this, function(response){
						 document.getElementById('nodelist').innerHTML = response.responseText;
					}, function(){
						//alert(1);
						
					});
                    OpenLayers.Event.stop(e);
                });
				
				
        }

 
    </script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 600px">
    </div>
	
	<div id="nodelist">
            <em>Click on the map to get feature info</em>
    </div>
</body>
<script>
	$(document).ready(function(){
		var height=$(window).height()-140;
		$("#map").height(height);
	});
</script>
</html>
